/**
 * Created by huotaol on 2017/6/23.
 */
import React, {Component} from "react";
import {Image, Text, TouchableOpacity, View} from "react-native";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";
import CustomStyle from "../../../common/style/CustomStyle";
import {connect} from "react-redux";
import * as  RequestUtil from "../../../common/util/RequestUtil";
import {Actions} from "react-native-router-flux";
import Util from "../../main/Util";
import GiftedListView from "react-native-gifted-listview";
import * as Url from "../../constant/Url";

class MyEstimate extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {data: [],};
        this._fetchData = this._fetchData.bind(this);
        this._renderItem = this._renderItem.bind(this);
    }

    _fetchData(page = 1, callback, options) {
        const {userData} = this.props;
        const url = Url.BASE_URL + '/finance/list';
        const param = new FormData();
        param.append('userid', userData.id);
        console.log('MyEstimate _fetchData    ');
        RequestUtil.request(url, 'post', param).then(ret => {
            const {list, imgPrefix} = ret;
            this.imgPrefix = imgPrefix;
            callback(list);
        }).catch(err => {
            Actions.pop();
            Util.showToast(err);
        });
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor: '#FFFCEE'}}>
                <ModuleCommonHeader title={'我的评估'}/>
                <GiftedListView
                    style={{marginTop: CustomStyle.getActualSizeInVertical(30),}}
                    onFetch={this._fetchData}
                    rowView={this._renderItem}
                    firstLoader={true} // display a loader for the first fetching
                    enableEmptySections={true}
                    pagination={false}
                    withSections={false} // enable sections
                    refreshableTintColor="#999999"
                    emptyView={this._renderEmptyView}
                    renderSeparator={this._renderSeparator}
                />
            </View>
        );
    }

    _renderEmptyView() {
        return <View style={{alignItems: 'center'}}>
            <Text style={[CustomStyle.baseText, {
                fontSize: CustomStyle.getActualFontSize(30),
                color: 'black',
            }]}>暂无数据</Text>
        </View>
    }

    _renderSeparator() {
        return <View style={{flex: 1, height: CustomStyle.getActualSizeInVertical(30),}}>

        </View>
    }

    _renderItem(item) {
        const estimated = item.feprice > 0;
        return <TouchableOpacity onPress={() => {
            if (estimated) {
                Actions.ApplyLoan({data: item});
            }
        }} style={{
            flex: 1, flexDirection: 'row',
            paddingLeft: CustomStyle.getActualSizeInHorizontal(30),
            paddingTop: CustomStyle.getActualSizeInVertical(40),
            height: CustomStyle.getActualSizeInVertical(200),
            backgroundColor: 'white',
        }}>
            <Image source={{uri: this.imgPrefix + item.logoUrl}}
                   resizeMode={'contain'}
                   style={{
                       width: CustomStyle.getActualSizeInHorizontal(180),
                       height: CustomStyle.getActualSizeInVertical(120),
                   }}/>
            <View style={{
                flex: 1,
                marginLeft: CustomStyle.getActualSizeInHorizontal(30),
            }}>
                <View style={{
                    flex: 1, width: CustomStyle.getActualSizeInHorizontal(460),
                    height: CustomStyle.getActualSizeInVertical(61),
                }}>
                    <Text
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(26),
                            color: '#4a3d18',
                        }]}>{item.carTitle}</Text>
                </View>


                <View style={{flex: 1, flexDirection: 'row-reverse', justifyContent: 'space-between',}}>
                    <View style={{
                        width: CustomStyle.getActualSizeInHorizontal(140),
                        height: CustomStyle.getActualSizeInVertical(38),
                        backgroundColor: estimated ? '#25a0ff' : '#e3e9ed',
                        borderTopLeftRadius: CustomStyle.getActualSizeInHorizontal(19),
                        borderBottomLeftRadius: CustomStyle.getActualSizeInHorizontal(19),
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(24),
                            color: estimated ? 'white' : '#857e6e',
                        }]}>{estimated ? '评估成功' : '正在评估'}</Text>
                    </View>
                    {estimated ? this._renderPrice(item) : null}

                </View>
            </View>

        </TouchableOpacity>
    }

    _renderPrice(item) {
        return <View style={{
            width: CustomStyle.getActualSizeInHorizontal(180),
            height: CustomStyle.getActualSizeInVertical(38), justifyContent: 'center', alignItems: 'center',
            borderRadius: CustomStyle.getActualSizeInHorizontal(19),
            borderWidth: CustomStyle.getActualSizeInHorizontal(1),
            borderColor: '#ff4e63',
        }}>
            <Text style={[CustomStyle.baseText, {
                fontSize: CustomStyle.getActualFontSize(24),
                color: '#ff4e63',
            }]}>评估价:{item.feprice}</Text>
        </View>
    }
}

const mapStateToProps = (state) => {
    const {userData} = state;
    return {
        userData: userData,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(MyEstimate);